<template>
  <div class="custom-send-root">
    <router-link class="back-btn" to="/counselor">← 返回辅导员端导航</router-link>
    <div class="custom-send-card">
      <h2>自定义消息发送</h2>
      <div class="recipient-group">
        <label>选择收件人：</label>
        <div class="recipient-options">
          <div class="recipient-option" v-for="(item, idx) in recipients" :key="idx">
            <input type="checkbox" v-model="item.checked" :id="item.id">
            <label :for="item.id">{{ item.label }}</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="subject">主题：</label>
        <input type="text" id="subject" v-model="subject" placeholder="请输入主题">
      </div>
      <div class="form-group">
        <label>内容：</label>
        <div class="toolbar">
          <button type="button" title="加粗"><b>B</b></button>
          <button type="button" title="斜体"><i>I</i></button>
          <button type="button" title="下划线"><u>U</u></button>
          <button type="button" title="插入链接">🔗</button>
          <button type="button" title="插入图片">🖼️</button>
        </div>
        <textarea id="content" v-model="content" placeholder="请输入内容" rows="7"></textarea>
      </div>
      <div class="form-group file-group">
        <label>附件：</label>
        <input type="file" id="file-upload" @change="onFileChange" style="display:none;">
        <label for="file-upload" class="file-btn">选择文件</label>
        <span v-if="file" class="file-name">{{ file.name }}</span>
      </div>
      <div class="btn-group">
        <button class="btn main" @click="send">发送</button>
        <button class="btn secondary" @click="saveDraft">保存草稿</button>
      </div>
    </div>
    <div class="history-card">
      <h3>历史发送记录</h3>
      <div v-if="history.length === 0" class="empty">暂无历史记录</div>
      <div v-for="(item, idx) in history" :key="idx" class="history-item">
        <div class="history-title">{{ item.subject }}</div>
        <div class="history-meta">{{ item.date }} | 收件人：{{ item.to }}</div>
        <div class="history-content">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CounselorCustomSend',
  data() {
    return {
      recipients: [
        { id: 'allParents', label: '全体家长', checked: false },
        { id: 'class1', label: '高一(1)班家长', checked: false },
        { id: 'class2', label: '高一(2)班家长', checked: false },
        { id: 'individual', label: '个别家长', checked: false }
      ],
      subject: '',
      content: '',
      file: null,
      history: [
        { subject: '开学通知', date: '2024-03-01', to: '全体家长', content: '新学期即将开始，请家长们关注开学准备事项。' },
        { subject: '安全提醒', date: '2024-02-10', to: '高一(1)班家长', content: '近期注意交通安全，防范意外。' }
      ]
    }
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    send() {
      if (!this.subject || !this.content) {
        alert('请填写主题和内容！');
        return;
      }
      // 组装收件人
      const selectedRecipients = this.recipients.filter(r => r.checked).map(r => r.label).join('、') || '未选择';
      // 获取当前日期
      const now = new Date();
      const date = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
      // 添加到历史记录
      this.history.unshift({
        subject: this.subject,
        date: date,
        to: selectedRecipients,
        content: this.content
      });
      // 清空输入框
      this.subject = '';
      this.content = '';
      this.file = null;
      this.recipients.forEach(r => r.checked = false);
      alert('发送成功（模拟）');
    },
    saveDraft() {
      alert('草稿已保存（模拟）');
    }
  }
}
</script>
<style scoped>
.custom-send-root {
  min-height: 100vh;
  background: #f6f8fa;
  padding: 32px 0 60px 0;
}
.custom-send-card {
  max-width: 520px;
  margin: 32px auto 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(102,126,234,0.10);
  padding: 36px 32px 28px 32px;
}
.custom-send-card h2 {
  text-align: center;
  margin-bottom: 28px;
  color: #4a4a4a;
}
.recipient-group { margin-bottom: 18px; }
.recipient-group label { font-weight: 500; }
.recipient-options { margin-top: 8px; }
.recipient-option { margin-right: 18px; display: inline-block; font-size: 15px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; color: #333; }
.form-group input[type="text"], .form-group textarea {
  width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px;
}
.toolbar {
  background-color: #f5f7fa;
  padding: 6px 0 6px 8px;
  border: 1px solid #e0e7ef;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
}
.toolbar button {
  background: none;
  border: none;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 16px;
  color: #667eea;
  border-radius: 4px;
  margin-right: 4px;
  transition: background 0.2s, color 0.2s;
}
.toolbar button:hover {
  background-color: #e0e7ff;
  color: #4a4a4a;
}
.file-group { display: flex; align-items: center; }
.file-btn {
  display: inline-block;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 18px;
  padding: 6px 18px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.2s;
}
.file-btn:hover {
  background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%);
}
.file-name { color: #666; font-size: 14px; }
.btn-group { display: flex; gap: 18px; margin-top: 18px; }
.btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn.main {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(102,126,234,0.10);
}
.btn.main:hover {
  background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%);
}
.btn.secondary {
  background: #f0f1f5;
  color: #666;
}
.btn.secondary:hover {
  background: #e0e7ef;
}
.history-card {
  max-width: 520px;
  margin: 36px auto 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(102,126,234,0.08);
  padding: 24px 28px 18px 28px;
}
.history-card h3 {
  margin-bottom: 18px;
  color: #4a4a4a;
  font-size: 18px;
}
.history-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0 12px 0;
}
.history-title { font-weight: 500; color: #333; }
.history-meta { font-size: 13px; color: #888; margin-bottom: 4px; }
.history-content { color: #555; font-size: 14px; }
.empty { color: #aaa; text-align: center; margin: 18px 0; }
.back-btn {
  display: inline-block;
  margin: 24px 0 18px 0;
  padding: 8px 22px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(102,126,234,0.10);
  transition: background 0.2s, box-shadow 0.2s;
}
.back-btn:hover {
  background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%);
  box-shadow: 0 6px 18px rgba(102,126,234,0.18);
}
</style> 